<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="http://www.baizhiedu.com" class="navbar-brand">当当网</a>

        </div>
        <span class="navbar-text">欢迎您：<a href="" >xxx</a></span>
        <ul class="nav navbar-nav">
            <li><a href="" class="navbar-link"><span class="text-primary">登录</span></a></li>
            <li class="divider"></li>
            <li><a href="" class="navbar-link"><span class="text-primary">注册</span></a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li >
                <a href="cart/cart.html">
                    <svg height="15"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
											<g>
												<path d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
													c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
													C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
													H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
													c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
											</g>
										</svg>
                    <span class="text-muted">购物车</span>
                </a>
            </li>
            <li class="divider"></li>
            <li><a href="">我的当当</a></li>
            <li class="divider"></li>
            <li><a href="">帮助</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <img src="../images/cart/dd_logo.jpg" alt="" class="pull-right">
        </div>
        <div class="col-md-7">

            <ul class="nav nav-pills " style="padding-top:10px">
                <li  style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px;">1.购物车</h4></li>
                <li  style="margin: 10px;background:rgb(255,102,102)"><h4 style="margin:15px;color:rgb(255,231,250)" class="text-muted">2.填写订单</h4></li>
                <li  style="margin:10px;background:rgb(246,246,246)"><h4 style="margin:15px" class="text-muted">3.支付订单</h4></li>
            </ul>
        </div>
    </div>
    <hr style="border:solid 2px red;">

    <div class="container">
        <div class="row">
            <h4>收货人信息</h4>
            <div class="col-sm-3" style="padding:0 5px">
                <div class="address" style="padding:10px 20px;border:solid 2px #E6E4E2;height:135px;background: #FBFBFB;">

                    <div style="padding-bottom:5px">
                        <div class="pull-left"><strong>徐双元</strong></div>
                        <div class="pull-right"><strong>18530031576</strong></div>
                    </div>
                    <hr >
                    <p>中国 河南 郑州 惠济区 刘寨街道</p>
                    <div style="padding-bottom: 10px;display: none" class="operation">
                        <a href="" style="padding-right: 20px;">编辑</a>
                        <a href="">删除</a>
                    </div>

                </div>
            </div>
            <div class="col-sm-3 " style="padding:0 5px">
                <div class="address" style="padding:10px 20px;border:solid 2px #E6E4E2;height:135px;background: #FBFBFB;">

                    <div style="padding-bottom:5px" >
                        <div class="pull-left"><strong>徐双元</strong></div>
                        <div class="pull-right"><strong>18530031576</strong></div>
                    </div>
                    <hr >
                    <p>中国 河南 郑州 金水区 文化路街道硅谷广场A座14层百知教育</p>
                    <div style="padding-bottom: 10px;display: none" class="operation">
                        <a href="" style="padding-right: 20px;">编辑</a>
                        <a href="">删除</a>
                    </div>

                </div>
            </div>
            <div class="col-sm-3" style="padding:0 5px">
                <div class="address" style="padding:10px 20px;border:solid 2px #E6E4E2;height:135px;background: #FBFBFB;">
                    ...
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-12" style="margin:20px 0">
                <button class="btn" data-toggle="modal" data-target="#addAddress">新增收货地址 <span class="glyphicon glyphicon-plus"></span></button>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-11" style="padding-left:0px">
                <h4 class="pull-left" >送货清单</h4> <a href="" class="pull-right">返回购物车</a>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-11">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-sm-12" style="padding-left:150px">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-3 text-center">商品信息</div>
                                        <div class="col-md-3 text-center">单价（元）</div>
                                        <div class="col-md-3 text-center">数量</div>
                                        <div class="col-md-3 text-center">金额（元）</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul class="media-list">
                            <div class="media">
                                <div class="media-left media-middle">
                                    <img src="../images/book/jpm.jpg" alt="" class="media-object" style="width:130px">
                                </div>
                                <div class="media-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">金瓶梅</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">￥120.0</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">1</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">￥120.0</span>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                                <hr>
                            </div>
                            <div class="media">
                                <div class="media-left media-middle">
                                    <img src="../images/book/dzlgz.jpg" alt="" class="media-object" style="width:130px">
                                </div>
                                <div class="media-body">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">东周列国志</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">￥19.0</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small">2</span>
                                            </div>
                                            <div class="col-md-3 text-center">
                                                <span class="text-muted small text-center">￥38.0</span>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                                <hr>
                            </div>

                        </ul>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="row">
                                    <div class="col-md-2" style="padding-right:0">寄送至:</div>
                                    <div class="col-md-9 text-muted small" style="padding-left:0">
                                         <span>中国 河南 郑州市 惠济区 刘寨街道</span>
                                        <p><span>徐双元</span><span>18530031576</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-md-offset-3">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="small text-muted">共 <span style="color:red">2</span> 件商品</p>
                                        <p class="small text-muted">实付金额：￥<span style="color:red">158.0</span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <a href="../order/place-order.html" class="btn btn-danger">去支付</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


</div>

<!-- 添加地址表单 -->
<div id="addAddress" class="modal fade" tabindex="-1">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加地址</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">收件人：</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="name" placeholder="收件人姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label">电话：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="mobile" placeholder="电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">地址：</label>
                        <div class="col-sm-10">
                            <div class="row">
                                <label class="col-sm-2 control-label">省：</label>
                                <div class="col-sm-4">
                                    <select name="province" id="province" class="form-control">
                                        <option>河南省</option>
                                    </select>
                                </div>
                                <label class="col-sm-3 control-label">市：</label>
                                <div class="col-sm-3" style="padding-left:0">
                                    <select name="city" id="city" class="form-control">
                                        <option>郑州</option>
                                        <option>开封</option>
                                        <option>南阳</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 control-label" style="padding:0 0">区（县）：</label>
                                <div class="col-sm-4">
                                    <select name="area" id="area" class="form-control">
                                        <option>金水区</option>
                                        <option value="">惠济区</option>
                                    </select>
                                </div>
                                <label class="col-sm-3 control-label" style="padding:0 0">街道（乡镇）：</label>
                                <div class="col-sm-3" style="padding-left:0">
                                    <select name="street" id="street" class="form-control">
                                        <option>文化路</option>
                                        <option>天明路</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-sm-2 control-label">详细地址：</label>
                                <div class="col-sm-10">
                                    <textarea name="address" class="form-control" id="" rows="3">
                                    </textarea>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-2">
                            <button type="submit" class="btn btn-primary">添加</button>

                        </div>
                        <div class="col-sm-offset-1 col-sm-2">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script type="text/javascript">
    // 为地址添加鼠标移入移出事件
    $(function(){
        $(".address").mouseover(function(){
            $(this).find(".operation").css("display", "block");
        }).mouseout(function(){
            $(this).find(".operation").css("display", "none");
        }).click(function(){
            $(".address").css("border","solid 2px #E6E4E2");
            $(this).css("border", "solid 2px red");
        })
    })
</script>
</body>
</html>